<template>
  <div>
    <van-row>
      <!-- 左侧分类 -->
      <van-col span="6">
        <van-sticky :offset-top="46">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="(item,i) in categoryList" :key="i" :title="item.name"
              @click="onClickLeftMenus(item.id)" />
          </van-sidebar>
        </van-sticky>
      </van-col>
      <!-- 右侧商品列表 -->
      <van-col span="18">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
            :immediate-check="false" :offset="0">
            <!-- 商品卡片列表 -->
            <van-card v-for="(item,i) in productList" :key="i" :price="item.price" :desc="item.spec"
              :title="item.title" :thumb=" APIDomainName + item.pic" @click="onDetail(item.id)" />
          </van-list>
        </van-pull-refresh>
      </van-col>
    </van-row>
  </div>
</template>

<script>
//1.导入封装后的接口	
import {
  getProductListAPI
} from "@/api/product.js";
import {
  getCategoryAPI
} from "@/api/category.js"

export default {
  data() {
    return {
      productList: [], //商品类别（指定分类id）
      categoryList: [], //分类列表				

      //左侧 导航栏
      activeKey: 0,

      pageTotal: 0, //总页数

      //上拉加载控制变量
      loading: false,
      finished: false,

      //下拉刷新
      refreshing: false,

      //查询参数
      query: {
        category_id: null,
        pageIndex: 0, //当前页码
        pageSize: 8, //页码大小
        keyWord: "", //查询关键字
      },
    }
  },

  //生命周期的钩子函数，当实例别创建好了后被调用
  created() {
    //获取所有分类
    getCategoryAPI().then(result => {
      console.log(result); //调式输出，也可以看看数据结构
      this.categoryList = result.data;
      this.query.category_id = this.categoryList[0].id; //取分类列表中的第一个分类id
      this.onRefresh();
    });
  },
  methods: {

    // 单击左菜单中的某一项后，显示对应分类的商品列表
    onClickLeftMenus(category_id) {
      this.query.category_id = category_id; //更新分类id				
      this.onRefresh();
    },

    onDetail(id) {
      this.$router.push({
        name: 'productDetail',
        params: {
          id
        },
      });
    },

    //上拉加载
    onLoad() {
      this.query.pageIndex += 1; //页码增加	
      getProductListAPI(this.query).then(result => {
        //如果时刷新就商品列表清空
        if (this.refreshing) {
          this.productList = [];
          this.refreshing = false;
        }

        //总页数
        this.pageTotal = result.pageTotal;
        //数组 拼接
        if (result.data.length > 0) {
          this.productList = this.productList.concat(result.data);
        }

        this.loading = false;

        if (this.query.pageIndex >= this.pageTotal) {
          this.finished = true;
        }

      });
    },

    //下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.query.pageIndex = 0; //重置页号
      this.productList = [];

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },

    //搜索商品
    onSearch() {
      this.onRefresh();
    }
  }
}
</script>

<style lang="less" scoped>
.product-page {
  padding: 20px;
  background-color: #f9f9f9;
}

.van-sidebar {
  width: 120px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.van-sidebar-item {
  padding: 15px;
  transition: all 0.3s ease;
  
  // 添加悬停效果
  &:hover {
    background-color: #f5f5f5;
    transform: translateX(5px);
  }
  
  // 选中状态增强
  &.van-sidebar-item--active {
    background-color: #e8f3ff;
    border-right: 3px solid #1989fa;
  }
}

// 商品卡片添加阴影和悬停效果
.van-card {
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
  }

  .van-card__content {
    justify-content: center;

    .van-card__price {
      color: red;
      font-weight: bold;
      text-align: right;
    }
  }
}
</style>